<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

class Count extends React.Component {

  constructor(props) {
    console.log('Count-constructor');
    super(props)
    this.state = {count:0}
  }
  add = () => {
    console.log(this.state.count);
    const {count} = this.state
    this.setState = {count:count+1}
  }

  death = () => {
    ReactDom.unmountComponentAtNode(document.getElementById('example'))
  }

  // 组件将要挂载前执行
  UNSAFE_componentWillMount(){
    console.log('Count---componentWillMount');
  }

  componentDidMount(){
    console.log('Count---componentDidMount');
  }

  // 组件将要更新的钩子
  UNSAFE_componentWillUpdate(){
    console.log('Count---componentWillUpdate');
   }


   // 组件将要卸载
   componentWillUnmount(){
    console.log('Count---componentWillUnmount');
   }


  render(){
    console.log('Count---render');
    const {count} = this.state
    return (
      <div>
        <h2>当前求和为：{count}</h2>
        <button onClick={this.add}>点我加1</button>
        <button onClick={this.death}>卸载组件</button>
      </div>
    )
  }
}

class A extends React.Component {

state = {carName:'奔驰'}

changeCar = () => {
  this.setState({carName:"奥托"})
}
// setState会导致B组件也重新渲染
render(){
  return(
    <div>
      <div>A</div>
      <button onClick={this.changeCar}>换车</button>
      <B  carName={this.state.carName}/>
    </div>
  )
}
}

class B extends React.Component {
// 第一次不算，第二次接收新的props才会调用它，所以初始化加载B组件的时候不会渲染它
UNSAFE_componentWillReceiveProps(){
  console.log('B--componentWillReceiveProps');
}
render(){
  return(
    <div>
      <div>我是b组件，接收到的车是:{this.props.carName}</div>
    </div>
  )
}
}

ReactDOM.render(
	<Count/>,
	document.getElementById('example')
);

</script>

</body>
</html>